
layui.use(['form', 'admin', 'ax','laydate','upload'], function () {
    var $ = layui.jquery;
    var $ax = layui.ax;
    var form = layui.form;
    var admin = layui.admin;
    var laydate = layui.laydate;
    var upload = layui.upload;

    // 图片压缩
    function canvasDataURL(file, callback) { //压缩转化为base64
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            const img = new Image();
            const quality = 0.2 // 图像质量比例
            const canvas = document.createElement('canvas');
            const drawer = canvas.getContext('2d');
            img.src = this.result;
            img.onload = function () {
                canvas.width = img.width;
                canvas.height = img.height;
                drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
                convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
            }
        }
    }

    function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式
        const arr = urlData.split(',');
        const mime = arr[0].match(/:(.*?);/)[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        callback(new Blob([u8arr], {
            type: mime
        }));
    }

// 照片
    var arr = [];
    upload.render({
        elem: '#many_wwztimg_upload_btn'
        , url: '/task/uploads' //改成您自己的上传接口
        , multiple: true
        , auto: false
        , before: function (obj) {
             //this.data = {'dm': $('#dm').val()};//关键代码
            //预读本地文件示例，不支持ie8
            // obj.preview(function(index, file, result){
            //     $('#uploader-list').append('<img style="width: 80px;height: 80px;" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
            // });
        }
        // 图片压缩
        , choose: function (obj) { //选择文件后的回调
            var files = obj.pushFile();
            var filesArry = [];
            for (var key in files) { //将上传的文件转为数组形式
                filesArry.push(files[key]);
            }
            var index = filesArry.length - 1;
            var file = filesArry[index]; //获取最后选择的图片,即处理多选情况

            if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
                return obj.upload(index, file);
            }
            canvasDataURL(file, function (blob) {
                var aafile = new File([blob], file.name, {
                    type: file.type
                })
                var isLt1M;
                if (file.size < aafile.size) {
                    isLt1M = file.size;
                } else {
                    isLt1M = aafile.size;
                }
                if (isLt1M / 1024 / 1024 > 2) {
                    return layer.alert('上传图片过大！');
                } else {
                    if (file.size < aafile.size) {
                        return obj.upload(index, file);
                    }
                    obj.upload(index, aafile);
                }
            })
        }
        , done: function (res) {
            //获取到图片拼接展示
            $("#uploader-list-wwztimg").append(
                '<div id="pic" class="file-iteme">' +
                '<div class="handle"><span class="layui-icon"></span></div>' +
                "<div class='gs-upload-file-container'>" +
                "<div class='gs-upload-ele'>" +
                "<div class='progress-bar progress-bar-success progress-bar-striped gs-upload-progress-bar' style='width: 188px; display: none;'></div>" +
                "<div class='gs-upload-ele-img-div'>" +
                "<img class='gs-upload-ele-img' src='" + res.data.src + "' style='cursor: pointer;width: 80px;height: 80px;'>" +
                "</div>	" +
                "<div class='gs-upload-ele-content'>" +
                "<div class='gs-upload-ele-title-div'></div>" +
                "<div class='gs-upload-ele-menu'>" +
                "</div></div></div></div></div>"
            );
            //图片预览
            layer.photos({
                photos: '#uploader-list-wwztimg',
                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
            //上传完毕
            arr.push(res.data.src);
            $("#wwztimg").val(arr);
        }
    });

    //返回按钮
    $("#backupPage").click(function () {
        window.location.href = Feng.ctxPath + '/task/projectTask?id=' + id;
    });
});